<template>
  <div class="container">
    <div class="position-top">
      <el-input
        size="medium"
        style="width: 300px; margin-right: 10px"
        v-model.trim="selectedArea.name"
        placeholder=""
        :disabled="!updateAirportStation"
      >
      </el-input>
      <el-button
        type="success"
        size="medium"
        @click="allowUpdateAirportStation"
        v-if="selectedArea.id && !updateAirportStation"
      >
        编辑区域名称
      </el-button>
      <el-button
        type="primary"
        size="medium"
        v-if="selectedArea.id && updateAirportStation"
        @click="confirmSaveArea"
      >
        确认修改
      </el-button>
      <el-button
        type="info"
        size="medium"
        v-if="selectedArea.id && updateAirportStation"
        @click="updateAirportStation = false"
      >
        取消
      </el-button>
    </div>
    <iframe
      src="./fengMap/settingNecessaryPointAreaMap.html"
      ref="SettingNecessaryPointAreaMap"
    ></iframe>

    <div class="table-container" :class="{ 'fold-left-animate': leftFold }">
      <h2 class="h2-tit">区域列表</h2>
      <div class="polygon-areas">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              @select="handleSelect"
              v-for="(area, index) in polygonAreas"
              :key="index"
            >
              <el-menu-item :index="area.id + ''">
                <template slot="title">
                  <span class="area-name">{{ area.name }}</span>
                </template>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="fold" v-if="leftFold">
        <img
          src="@/assets/icon/zhe-you.png"
          alt=""
          srcset=""
          @click="moveLeftRightMain('left')"
        />
      </div>
      <div class="unfold" v-if="!leftFold" @click="moveLeftRightMain('left')">
        <img src="@/assets/icon/zhe-zuo.png" alt="" srcset="" />
      </div>
    </div>

    <el-dialog
      title="请输入新增区块名称"
      :visible.sync="addAreaVisible"
      width="50%"
      :before-close="handleAddAreaVisibleClose"
    >
      <el-input v-model="selectedArea.name"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAddAreaVisibleClose">取 消</el-button>
        <el-button type="primary" @click="confirmSaveArea">确认保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
function isJsonString(str) {
  try {
    if (typeof JSON.parse(str) == "object") {
      return true;
    }
  } catch (e) {}
  return false;
}
export default {
  data() {
    return {
      polygonAreas: [],
      selectedArea: {},
      updateAirportStation: false,
      addAreaVisible: false,
      leftFold: false,
    };
  },
  mounted() {
    this.$refs.SettingNecessaryPointAreaMap.onload = () => {
      this.$refs.SettingNecessaryPointAreaMap.contentWindow.$parent_this = this;
    };
  },
  methods: {
    allowUpdateAirportStation() {
      this.updateAirportStation = true;
    },
    handleAddAreaVisibleClose(done) {
      this.$confirm("关闭后将清空当前绘制数据，确定关闭？").then((_) => {
        this.addAreaVisible = false;
        this.$refs.SettingNecessaryPointAreaMap.contentWindow.redraw();
        done && done();
      });
    },
    confirmSaveArea() {
      if (this.selectedArea && this.selectedArea.name) {
        this.addAreaVisible = false;
        this.updateAirportStation = false;
        this.$refs.SettingNecessaryPointAreaMap.contentWindow.confirmSaveDraw(
          this.selectedArea
        );
      } else {
        this.$message.error("请为框选区域命名");
      }
    },
    reload() {
      this.selectedArea = {};
      this.updateAirportStation = false;
      this.addAreaVisible = false;
      this.getAreaList();
    },
    getAreaList() {
      this.$http({
        url: this.$http.adornUrl("/platform/essential/airportAreaList"),
        method: "get",
      }).then((res) => {
        this.polygonAreas = res.data;
      });
    },
    moveLeftRightMain(direction) {
      if (direction == "left") {
        this.leftFold = !this.leftFold;
      } else {
        this.rightFold = !this.rightFold;
      }
    },
    handleSelect(e) {
      let selectedArea = this.polygonAreas.find((area) => area.id == e);
      if (
        selectedArea &&
        selectedArea.pointRestrict &&
        isJsonString(selectedArea.pointRestrict)
      ) {
        selectedArea.pointRestrict = JSON.parse(selectedArea.pointRestrict);
      }
      this.$refs.SettingNecessaryPointAreaMap.contentWindow.mapCameraMove(
        selectedArea
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  height: calc(100vh - 180px);
  width: 100%;
  iframe {
    border: none;
    width: 100%;
    height: 100%;
  }

  .position-top {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
    width: max-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.fold-left-animate {
  transform: translateX(-99%);
}
.table-container {
  width: 270px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(106, 106, 106, 0.26);
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s linear;

  .fold,
  .unfold {
    position: absolute;
    left: 255px;
    top: 49%;
    height: 30px;
    width: 30px;
    z-index: 2;
    cursor: pointer;
    // animation: moveLeft 3s linear infinite;
  }

  // 向左移动动画 反复执行
  @keyframes moveLeft {
    0% {
      right: 240px;
    }
    100% {
      right: 220px;
    }
  }
}

.polygon-areas {
  margin-top: 20px;
  height: 93%;
  overflow: scroll;
  .area-name {
    margin-left: 20px;
  }
}
.h2-tit {
  padding: 10px 20px 0 20px;
}
</style>
